<template>
  <div class="random-look sec-card">
    <div class="random-look-topic section-header">
      🧐 随便看看
    </div>
    <ul class="random-topic-list">
      <li  v-for="(item,index) in recommend" :key="index" :title="item.title" class="random-topic-item">
        <router-link :to="{name:'post-detail',params: { id: item.id }}">
          <span v-if="index<9">
            0{{ parseInt(index) + 1 }}
          </span>
          <span v-else>
            {{ parseInt(index) + 1 }}
          </span>
          {{ item.title }}
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { getRecommendTopics } from '@/api/post'

export default {
  name: 'Recommend',
  props: {
    topicId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      recommend: []
    }
  },
  created() {
    this.fetchRecommendTopics()
  },
  methods: {
    fetchRecommendTopics() {
      getRecommendTopics(this.topicId).then(value => {
        const { data } = value
        this.recommend = data
      })
    }
  }
}
</script>

<style scoped>

.random-topic-item{
  padding: 8px;
  font-size: 12px;
}
</style>
